<template>
  <div id='wrap'>
    <h1>绑定内联样式 Style</h1>
    <!-- 绑定 HTML style:绑定对象 -->
    <p :style="{ fontSize: `${fontSize}px`, color: fontColor }" @click="changeFontColor">唱跳rap</p>
    <hr>

    <!-- 绑定 HTML style: 直接绑定对象 -->
    <p :style="styleObject" @click="changestyle2">唱跳rap</p>
    <hr>

     <!-- 绑定 HTML style: 绑定数组 -->
     <p :style="[styleObject2,styleObject]" @click="changestyle2">唱跳rap</p>
    <hr>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'dayStuDemo14',
}
</script>

<script lang='ts' setup>
import { reactive, ref } from 'vue';
// 绑定 HTML style:绑定对象
const fontColor = ref('#ff4100')
const fontSize = ref(16)
function changeFontColor() {
  fontColor.value = '#000'
  setTimeout(() => {
    fontSize.value = 24
  }, 1000);
}
// 绑定 HTML style: 直接绑定对象
const styleObject = reactive({
  color:'red',
  fontSize:'30px'
})
function changestyle2(){
  styleObject.color = 'blue'
  styleObject.fontSize = '60px'
}
// 绑定 HTML style: 绑定数组
const styleObject2 = reactive({
  backgroundColor:'green'
})
</script>

<style lang='scss'>
.active {
  color: darkorange;
}

.text-danger {
  background-color: red;
}

.text-success {
  background-color: green;
}

.active-new {
  font-size: 22px;
}
</style>
